<script setup>
import { ref, onMounted } from 'vue'
import { getAllOnlineUser, offlineUser } from '@/api/user.js'
import { Message, Popconfirm } from '@arco-design/web-vue'

const tableLoading = ref(false)
const tableData = ref([])

const columns = [
  {
    title: '用户ID',
    dataIndex: 'id',
    ellipsis: true,
    tooltip: true,
    fixed: 'left',
    width: 190
  },
  {
    title: '用户Token',
    dataIndex: 'token',
    ellipsis: true,
    tooltip: true,
    width: 300 // 适当调整宽度以显示token
  },
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'optional',
    width: 100
  }
]

// 获取所有在线用户
const fetchOnlineUsers = () => {
  tableLoading.value = true
  getAllOnlineUser()
    .then(res => {
      if (res.data.code === 1) {
        tableData.value = res.data.data
      } else {
        Message.error(res.data.message || '获取在线用户失败')
      }
    })
    .catch(error => {
      console.error(error)
      Message.error('获取在线用户失败')
    })
    .finally(() => {
      tableLoading.value = false
    })
}

// 下线用户
const handleOffline = (token) => {
  offlineUser(token)
    .then(res => {
      if (res.data.code === 1) {
        Message.success('用户已成功下线')
        fetchOnlineUsers() // 重新获取在线用户列表
      } else {
        Message.error(res.data.message || '下线用户失败')
      }
    })
    .catch(error => {
      console.error(error)
      Message.error('下线用户失败')
    })
}

onMounted(() => {
  fetchOnlineUsers()
})
</script>

<template>
  <div id="user-online-page">
    <a-card class="card">
      <a-divider>在线用户管理</a-divider>
      <div class="table-container">
        <a-table
          stripe
          size="medium"
          :scroll="{ x: 1000 }"
          :loading="tableLoading"
          :pagination="false"
          row-key="id"
          :columns="columns"
          :data="tableData"
        >
          <template #optional="{ record }">
            <Popconfirm
              content="确定要下线该用户吗？"
              @ok="() => handleOffline(record.token)"
              position="br"
            >
              <a-button type="text" status="danger">下线</a-button>
            </Popconfirm>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
.table-container {
  min-height: 40vh;
}
</style>
